﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="./common/head :: head"></head>
<script type="text/javascript" th:inline="javascript">
    var contextPath = [[${session.ctx}]];
    $(function () {
        $("#registerForm").bootstrapValidator({
            live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
            submitButtons: '#registerBtn',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
            message: '验证失败',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '用户名必须输入'
                        },
                        stringLength: {
                            min: 5,
                            max: 30,
                            message: '用户名长度不能小于5位或超过30位'
                        },
                        threshold: 5, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: contextPath + '/login/exist',//验证地址
                            message: '用户已存在',//提示消息
                            delay: 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'get',//请求方式
                            data: function (v) {
                                var d = v.$form.serializeJSON();
                                return {
                                    name: d.name
                                }
                            }
                        },
                    }
                },
                pass: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '密码必须输入'
                        },
                        stringLength: {
                            min: 5,
                            max: 30,
                            message: '密码长度不能小于5位或超过30位'
                        },
                    }
                },
                email: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '邮箱必须输入'
                        },
                        emailAddress: {
                            message: '无效的邮箱地址'
                        },
                        threshold: 5, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: contextPath + '/login/exist',//验证地址
                            message: '邮箱已存在',//提示消息
                            delay: 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'get',//请求方式
                            data: function (v) {
                                var d = v.$form.serializeJSON();
                                return {
                                    email: d.email
                                }
                            }
                        },
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {//检测非空,radio也可用
                            message: '手机号必须输入'
                        },
                        regexp: {
                            regexp: /^1[3|4|5|8][0-9]\d{4,8}$/i,
                            message: '手机号格式不正确'
                        },
                        threshold: 5, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: contextPath + '/login/exist',//验证地址
                            message: '手机号已存在',//提示消息
                            delay: 500,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'get',//请求方式
                            data: function (v) {
                                var d = v.$form.serializeJSON();
                                return {
                                    phone: d.phone
                                }
                            }
                        },
                    }
                },
            }
        }).on('success.form.bv', function (e) {//点击提交之后
            // Prevent form submission
            e.preventDefault();
            var data = $(e.target).serializeJSON();
            http.add("/login/register", data, function (resp) {
                if (resp.success) {
                    toastr.success('注册成功');
                    setTimeout(function () {
                        location.href = contextPath + "/login/view";
                    },1500);
                } else {
                    toastr.warning('注册失败');
                }
            })
        });
    });

</script>
<body style="background-color: #ecf0f1;">
<div class="container">
    <div class="row">
        <div style="width:350px;margin: 60px auto;">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">注册</h3>
                </div>
                <div class="panel-body">
                    <form id="registerForm">
                        <div id="nameDiv" class="form-group">
                            <label for="name">用户名：</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="用户名">
                        </div>
                        <div id="passDiv" class="form-group">
                            <label for="pass">密码：</label>
                            <input type="password" class="form-control" name="pass" id="pass" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱：</label>
                            <input type="email" class="form-control" name="email" id="email" placeholder="邮箱">
                        </div>
                        <div class="form-group">
                            <label for="pass">手机号：</label>
                            <input type="text" class="form-control" name="phone" id="phone" placeholder="手机号">
                        </div>
                        <div style="width: 100%">
                            <button id="registerBtn" type="submit" class="btn btn-info btn-block">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>